<template>
  <div class="TeacherMain">
    <div class="TeacherMain-main">
      <router-view></router-view>
    </div>
    <div class="TeacherMain-top">
      <Top />
    </div>
    <div class="TeacherMain-left">
      <left />
    </div>
  </div>
</template>

<script>
import Top from "./Top.vue";
import Left from "./Left.vue";

export default {
  name: "TeacherMain",
  components: {
    Top,
    Left,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.TeacherMain-left {
  box-sizing: border-box;
  z-index: 1;
  bottom: 0;
  letter-spacing: 0;
  border-radius: 3px;
  margin: 6px;
  width: 200px;
  height: 89%;
  position: absolute;
  top: 49.3%;
  left: 90px;
  transform: translate(-44.5%, -45%);
}
.TeacherMain {
  height: 750px;
  width: 100%;
  background-image: linear-gradient(to right, #edcfeb, #c1cfe2);
}
.TeacherMain-main {
  background: #fff;
  height: 89%;
  left: 215px;
  min-width: 690px;
  overflow-x: auto;
  position: absolute;
  top: 49.3%;
  width: calc(100% - 220px);
  box-sizing: border-box;
  border-radius: 3px;
  transform: translate(0, -44%);
}

.TeacherMain-top {
  display: flex;
  height: 66px;
  width: 100%;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 4.6%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-bottom: 1px solid rgb(210, 210, 238);
}
</style>